'use strict'
import React, { createClass, PropTypes } from 'react'
import { connect } from 'react-redux'
import { toastr } from 'react-redux-toastr'
import $ from 'jquery'
import { setExchangeModalData, setGlobalData } from '../actions'

const ShippingInfoPage = createClass({
    getInitialState() {
        return {
            loading: true,
            error: null,
            data: null
        };
    },
    componentDidMount() {
        $('body').css('backgroundColor', '#fff');
        let successFun = (resp) => {
            this.setState({loading: false, data: resp});
        };
        $.ajax({
            url: '../webapp/data/goodItem.json',
            type: 'GET',
            dataType: 'JSON',
            success: successFun
        });
    },
    submitShippingInfo(ev) {
        let $form = $('#shippingForm'),
            data = $form.serialize(),
            dataArr = $form.serializeArray(),
            $btn = $(ev.currentTarget),
            errorMessage = [],
            errorMessageDic = {
                address: '请输入收件地址',
                name: '请输入收件人名称',
                phone: '请输入收件人联系电话'
            };
        dataArr.map((item, idx) => {
            if(item.value == "") {
                errorMessage.push({'field': item.name, message: errorMessageDic[item.name]});
            }
        });

        if(errorMessage.length > 0) {
            let toastErrorMessage = message => toastr.error(message);
            errorMessage.map((item) => {
                toastErrorMessage(item.message);
            });
        }
        else {
            $btn.button('loading');
            $.ajax({
                url: '../webapp/data/respExchangeOrder.json',
                type: 'GET',
                dataType: 'JSON',
                data: data,
                success: function(resp) {
                    if(resp.status == 1) {
                        let toastConfirmMessage = message => toastr.confirm(message, {
                            onOk: () => {
                                history.go(-1);
                            }
                        });
                        toastConfirmMessage('兑换成功');

                        $btn.attr('disabled', 'disabled').button('reset');
                        $form[0].reset();
                    }
                }
            });
        }
    },
    render() {
        //const { goodData, globalData, setGlobalData, setExchangeModalData } = this.props;
        //let userPoints = globalData ? globalData.points : null;

        if (this.state.loading) {
            return <div className="loading">努力加载中...</div>
        }
        else if (this.state.data) {
            let item = this.state.data,
                submitShippingInfo = ev => {
                    this.submitShippingInfo(ev);
                };

            return (<div className="shipping-info">
                <div className="good-view">
                    <div className="good-item">
                        <div className="good-image">
                            <img src={item.img_url}/>
                        </div>
                        <div className="good-meta">
                            <h3 className="good-title">{item.title}</h3>
                            <div className="need-points">所需积分：{item.points}</div>
                        </div>
                    </div>
                </div>
                <form className="shipping-form" id="shippingForm">
                    <h3 className="title">邮寄地址</h3>
                    <div className="form-label row">
                        <label className="label-title col-xs-3" htmlFor="address">地址：</label>
                        <input className="form-input col-xs-9" type="text" name="address" id="address"/>
                    </div>
                    <div className="form-label row">
                        <label className="label-title col-xs-3" htmlFor="name">收件人：</label>
                        <input className="form-input col-xs-9" type="text" name="name" id="name"/>
                    </div>
                    <div className="form-label row">
                        <label className="label-title col-xs-3" htmlFor="phone">联系电话：</label>
                        <input className="form-input col-xs-9" type="text" name="phone" id="phone"/>
                    </div>
                </form>

                <div className="fix-bottom-action">
                    <button className="btn btn-blue btn-lg btn-block" data-loading-text="数据提交中..." onClick={submitShippingInfo}>完成兑换</button>
                </div>
            </div>)
        }
        else {
            return <div>服务器响应错误</div>
        }
    }
});

const mapStateToProps = (state) => {
    return {
        goodData: state.goodList,
        globalData: state.globalData
    }
};

export default connect(mapStateToProps, {setExchangeModalData, setGlobalData})(ShippingInfoPage);
